{% stylesheet %}
.block_newsletter {
  text-align: center;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-image: var(--newsletter-bg-image);
  padding: var(--newsletter-padding);
  box-sizing: border-box;
}

.block_newsletter .block_title {
  padding-bottom: 30px;
}

.block_newsletter .layer_opacity {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: var(--newsletter-opacity);
  background-color: var(--newsletter-bg-color);
}

.block_newsletter .block_newsletter_content {
  position: relative;
  z-index: 9;
}

.block_newsletter form {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--newsletter-btn-color);
  height: 64px;
}

@media screen and (max-width: 767px) {
  .block_newsletter form {
    height: 44px;
  }
}

.block_newsletter .newsletter_txt {
  height: 100%;
  flex: 1;
  text-indent: 10px;
  box-sizing: border-box;
  border: none;
}

.block_newsletter .newsletter_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 110px;
  height: 100%;
  padding-left: 16px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  font-size: 0;
  background-color: var(--newsletter-btn-color);
  cursor: pointer;
}

.block_newsletter .newsletter_btn svg {
  width: 32px;
  height: 32px;
  margin-left: 10px;
}

@media screen and (max-width: 767px) {
  .block_newsletter .newsletter_btn svg {
    width: 20px;
    height: 20px;
  }
}

.block_newsletter .newsletter_btn path {
  fill: var(--newsletter-font-color);
}

.block_newsletter .newsletter_btn::before {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  border-top: 68px solid #fff;
  border-right: 16px solid transparent;
  border-left: 0 solid transparent;
  content: "";
  z-index: 10;
}

.block_newsletter .newsletter_btn span {
  font-size: 14px;
  color: var(--newsletter-font-color);
}

@media screen and (max-width: 767px) {
  .block_newsletter .newsletter_btn {
    min-width: 68px;
  }
}

{% endstylesheet %}
{% assign block_id = block_id | default : section.block_id  %}


{% if section.settings.is_width_fill %}
    {% assign container = "container-fill" %}
{% else %}
    {% assign container = "container-wrapper" %}
{% endif %}


  <div class="block_newsletter {{container}}" style="--newsletter-bg-image:url('{{ section.settings.newsletterBg.src }}');--newsletter-padding: {{ section.settings.padding.top | abs }}px {{ section.settings.padding.right | abs }}px {{ section.settings.padding.bottom | abs }}px {{ section.settings.padding.left | abs }}px;" >
    <div class="layer_opacity" style="--newsletter-opacity: {{ section.settings.layerOpacity  | divided_by : 100 }}; --newsletter-bg-color: {{ section.settings.layerBgColor }};"></div>
    <div class="block_newsletter_content {% if section.settings.format == '2' %}format_style{% endif %}">
  
        {% if section.settings.title != '' or section.settings.detail != '' %}
          <div class="block_title">
              {% if section.settings.title != '' %}<h2 style="color:{{section.settings.fontColor}}">{{ section.settings.title }}</h2>{% endif %}
              {% if section.settings.detail != '' %}<div class="block_title-detail" style="color:{{section.settings.fontColor}}">{{ section.settings.detail }}</div>{% endif %}
          </div>
        {% endif %}
  
        <form style="--newsletter-btn-color: {{ section.settings.buttonBgColor }};--newsletter-font-color: {{ section.settings.buttonColor }};">
            <input id="block_newsletter_email_{{block_id}}" name="newsletter_email" type="text" value="" class="newsletter_txt" placeholder="{{ lang.general.email }}"  >
            <button  name="newsletter_btn" type="button" value="" id="newsletter_btn{{block_id}}" class="newsletter_btn"  >
              {%- if section.settings.buttonName == "" -%}
              {% include "icon_silde_right" %}
              {%- else -%}
              <span>{{ section.settings.buttonName }}</span>
              {%- endif -%}
            </button>
        </form>
    </div>
  </div>

<script type="text/javascript">
(function(){const blockSubmitNewsletter = moi.throttle(function () {
    var domEmail = "#block_newsletter_email_{{block_id}}";
    email = $("#block_newsletter_email_{{block_id}}").val();
    if (email == "") {
        moi.tooltip({
            placement: "top",
            el: domEmail,
            timer: 5000,
            space: 0,
            content: "{{ lang.general.please_enter_a_valid_email_address }}"
        });
        return;
    }
    $isvalidemail = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(email);
    if (!$isvalidemail) {
        moi.tooltip({
            placement: "top",
            el: domEmail,
            timer: 1000,
            space: 0,
            content: "{{ lang.general.please_enter_a_valid_email_address }}"
        });
        return;
    }
    const load = moi.nodeShowLoading("#newsletter_btn{{block_id}}", "{{ section.settings.buttonColor }}");
    moi.ajax({
        url: "/module/newsletter",
        type: "POST",
        data: JSON.stringify({
            email: email
        }),
        dataType: "json",
        cache: false,
        complete: function () {
            load.close();
        },
        success: function (res) {
            if (res.data && res.data.data) {
                if (res.data.new_customer) {
                    callback_generate_lead();
                }
                moi.message({
                    content: `{{ section.settings.newsletterTip }}`
                });
            } else {
                moi.tooltip({
                    placement: "top",
                    el: domEmail,
                    timer: 1000,
                    space: 0,
                    content: "{{ lang.general.subscribe_failed }}"
                });
            }
        },
        error: function () {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 1000,
                space: 0,
                content: "{{ lang.general.connection_fails_please_retry_refresh }}"
            });
        }
    });
}, 3000);
$("#newsletter_btn{{block_id}}").click(function () {
    blockSubmitNewsletter();
});
})()
</script>
{% schema %}
{
	"tag": "section",
	"class": "block_newsletter",
	"is_global": false,
	"icon": "icon-dingyue",
	"name": {
		"zh_CN": "订阅"
	},
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_layout",
			"label": {
				"zh_CN": "内容留白"
			},
			"id": "padding"
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题"
			},
			"placeholder": {
				"zh_CN": "请输入标题"
			},
			"default": "Subscribe to our newsletter"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述"
			},
			"placeholder": {
				"zh_CN": "请输入描述"
			},
			"default": "Sign up for our email list and get 15% off your first order"
		},
		{
			"type": "card_input",
			"id": "buttonName",
			"label": {
				"zh_CN": "订阅按钮文字"
			},
			"default": "Subscribe"
		},
		{
			"type": "card_textarea",
			"id": "newsletterTip",
			"label": {
				"zh_CN": "订阅成功文字"
			},
			"default": "Subscribe Success"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "背景图片"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"id": "newsletterBg"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满"
			},
			"id": "is_width_fill"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "蒙层颜色"
			},
			"default": "#000",
			"id": "layerBgColor"
		},
		{
			"type": "card_slider",
			"id": "layerOpacity",
			"max": "100",
			"min": "0",
			"label": {
				"zh_CN": "蒙层透明度"
			},
			"default": "50%"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "按钮背景颜色"
			},
			"default": "#ff0000",
			"id": "buttonBgColor"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "图标/按钮文字颜色"
			},
			"default": "#fff",
			"id": "buttonColor"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "文字颜色"
			},
			"default": "#1D1F21",
			"id": "fontColor"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"padding": {
				"top": "50",
				"left": "15",
				"right": "15",
				"bottom": "50"
			},
			"fontColor": "#1D1F21",
			"title": "",
			"detail": "Sign up for our email list and get 15% off your first order",
			"buttonName": "",
			"newsletterTip": "Thank you for joining our mailing list!",
			"newsletterBg": {
				"src": "",
				"alt": ""
			},
			"is_width_fill": true,
			"layerBgColor": "#FFB100",
			"layerOpacity": "60",
			"buttonBgColor": "#1d1f21",
			"buttonColor": "#fff"
		},
		"blocks": []
	}
}
{% endschema %}